import React, { Component } from 'react'
import classNames from 'classnames'
import '../index.css'

export default class CommentBox extends Component {
  state = {
    // 输入的值
    content: '',
  }
  changeTextarea = (e) => {
    if (e.target.value.length > 100) {
      return alert('多了多了')
    }
    this.setState({ content: e.target.value.trim() })
  }
  submitComment = () => {
    const { content } = this.state
    console.log({ content })
  }
  render() {
    return (
      <>
        <h3 className="comm-head">评论</h3>
        <div className="comm-input">
          <textarea
            value={this.state.content}
            onChange={this.changeTextarea}
            placeholder="爱发评论的人，运气都很棒"
          ></textarea>
          <div className="foot">
            <div className="word">{this.state.content.length}/100</div>
            <div onClick={this.submitComment} className="btn">
              发表评论
            </div>
          </div>
        </div>
      </>
    )
  }
}
